<template lang="pug">
    div(class="tree-hole-create-room tree-hold-top-panel")
        PageHeader(:yes-or-no="{noText: '取消'}" @no="goBack")
            template(v-slot:default) 创建聊天室房间
            template(v-slot:right)
                span &nbsp;
                Spin(v-if="querying")

        ul(class="tree-hole-create-room-inputs")
            li(class="tree-hole-create-room-inputs-item")
                Input(placeholder="请输入聊天室主题或者名称" v-model="roomModel.name" size="large")
        div(class="tree-hole-create-room-actions")
            Button(type="success" long size="large" @click="doCreate") 创建房间
</template>
<script>
    import axios from "@/plugin/axios";
    import util from "@/lib/util";

    export default {
        data() {
            return {
                /**聊天室实体 */
                roomModel: {name: ""},
                querying: false
            };
        },
        methods: {
            goBack() {
                history.back();
            },

            // 创建聊天室
            doCreate() {
                if (this.querying) return;
                const data = this.roomModel;
                if (!data.name.trim()) return;

                const options = {url: "chatRoom/room/create", method: "post", data};
                const vm = this;

                this.querying = true;
                axios(options)
                    .then(room => {
                        vm.$Message.success('创建房间成功')
                        vm.$router.push({name: "hall-room", params: {id: room.id}});
                    })
                    .catch(msg => {
                    })
                    .then(() => {
                        this.querying = false;
                    });
            }
        },
        mounted() {
            var el = document.querySelector(".tree-hole-create-room");
            util.wxH5DragDownForbidden(el);
        },
        beforeRouteEnter(to, from, next) {
            if (from.name == "hall-room")
                next({name: 'hall'})
            else
                next();
        }
    };
</script>
<style lang="less" scoped>
    @import "../../common/common.less";

    .tree-hole-create-room {
        &-inputs {
            margin: 10px 0 0 0;
            padding: 0;
            list-style: none;

            font-size: 13px;

            &-item {
                height: 50px;
                display: flex;
                align-items: center;
                background-color: white;
                padding: 0 10px;
                margin-bottom: 1px;
            }
        }

        .tree-hole-create-room-actions {
            padding: 10px 10px;
        }

        &-edit-panel {
            background: @global-bg-color;
        }
    }
</style>
